<template>
  <el-form class="demo-ruleForm card-box loginform">
    <h3 class="title">系统登录</h3>
      <div class="input-pare-div">
            <input type="tel"  class="ipt-style" auto-complete="off" v-model="mobile" placeholder="账号" />
      </div>
      <div class="input-pare-div">
            <input type="password" auto-complete="off" class="pass-style" v-model='pwd' placeholder="密码" />
      </div>
      <div class="input-pare-div">
            <input type="tel" auto-complete="off" class="code-style" v-model='randcode' placeholder="验证码" />
            <img :src="imgSrc" @click="changeSrc($event)"/>
      </div>
<el-form-item style="width:100%;">
<el-button type="primary" style="width:100%;" @click="toIndex()"  :loading="logining">登录</el-button>

</el-form-item>
</el-form>
</template>

<script>

  import NProgress from 'nprogress'
  import md5 from 'js-md5'

  import req from '../util/request.js'
  export default {
    data() {
      return {
        logining: false,
        url:'http://weipostest.weipos.com:8084/yxt-web',
        idx:1,
        mobile:'',
        pwd:'',
        randcode:'',
        imgSrc:""
      };
    },
    created(){
      this.imgSrc=req.proUrl+"/rand"
    },
    methods: {

        toIndex(){
            var vm=this;
            req.jQ_ajax({
                  type:"post",
                  url:'/session',
                  data:{
                       mobile:vm.mobile,
                       pwd:vm.pwd,
                       randcode:vm.randcode
                   },
                   success:function(data){
                    vm.$router.push("/home");
                     if(data.code!=0){
                        vm.idx=vm.idx+1;
                        return;
                     }

                    vm.getEnterInfo(data);

                   },
                   error:function(data){
                        vm.idx=vm.idx+1;
                   }
              })




      },
      getEnterInfo(data){
        var _this=this;

           req.jQ_ajax({
             type:"PUT",
             url:'/session',
             data:{
                  entcode:data.items[0].entcode,
                  username:data.items[0].username,
                  useruid:data.items[0].useruid
             },
             success:function(res){

             },
             error:function(res){

             }
        })


      },
      changeSrc(e){
        e.target.src=this.imgSrc;
      }
    }
  }
</script>

<style scoped>
  .card-box {
    padding: 20px;
    /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin-bottom: 20px;
    background-color: #F9FAFC;
    margin: 180px auto;
    width: 400px;
    border: 2px solid #8492A6;
  }

  .title {
    margin: 0px auto 10px auto;
    text-align: center;
    color: #505458;
    font-size:16px;
  }

  .loginform {
    width: 350px;
    padding: 35px 35px 0px 35px;
  }
  .pass-style, .ipt-style,.code-style{

    width:100%;
    height:30px;
    margin-bottom:10px;
    background:#FFF;
    border:#d1d1d1 1px solid;
    border-radius:3px;

  }
  .input-pare-div{
     height:40px;
     line-height:40px;
  }
  .ipt-style{
     margin-bottom:0;
  }
  .code-style{
    width:50%;
    margin-top:-20px;
    margin-bottom:10px;
  }
</style>
